<template>
  <div class="fml-relative">
    <div class="fml-layout">
      <div class="fml-body animated fadeInDown">
        <!-- 查询条件 -->
        <div class="fml-ui-forms">
          <fml-search :formConfig="formConfig" ref="searchComp"></fml-search>
        </div>
        <!-- 列表操作按钮 -->
        <div class="ui-datagrid-header flex flex-end">
          <div>
           <fml-handle-btn
              class="fml-other-btn"
              :btnConfig="btnConfig"
            ></fml-handle-btn>
            </div>
        </div>
        <!-- 列表 -->
        <div class="fml-table-box">
          <fml-grid :PageConfig="pageConfig">
            <el-table-column slot="operation" label="操作" fixed="right" align="center" :width="160">
              <template slot-scope="scope">
                <fml-edit-btn
                  type="look"
                  size="mini"
                  styleType="plain"
                  text="查看"
                  :editConfig="editConfig"
                  :scope="scope"
                ></fml-edit-btn>
                <fml-edit-btn
                  type="del"
                  size="mini"
                  class="colorDanger"
                  styleType="plain"
                  text="删除"
                  btnUrl="ANNUNCIATE_MENU_DELETE"
                  :delApi="delApi"
                  :handleParam="{id:scope.row.id}"
                  :scope="scope"
                ></fml-edit-btn>
              </template>
            </el-table-column>
          </fml-grid>
        </div>
      </div>
    </div>
    <!-- 弹窗 -->
    <add-edit-dialog></add-edit-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import addEditDialog from "./add-edit-dialog";
import { defaultConfig, btnData, tableConfig, editConfig } from "./config";
export default {
  name: "fmlNoticeAnnoun",
  components: {
    addEditDialog
  },
  data() {
    return {
      delApi:'noticeList',
      editConfig,
      //表单配置
      formConfig: {
        defaultConfig,
        fmlForm: {
          startReleaseDate:'',
          endReleaseDate:''
        }
      },
      //按钮
      btnConfig: {
        btnData: btnData
      },
      // 列表
      pageConfig: {
        formHeight:320,//除了表格之外的高
        showNum:true,//显示序列号
        highlightCurrentRow: true, //是否要高亮当前行
        tableConfig, //列表信息
        Api: 'noticeList', //列表接口
        DataHandler(data){
         return data.map(item=>{
           if(item.status==1){
             item.status='已发布'
             item.className="colorSuccess"
           }else{
             item.status='未发布'
             item.className="colorDanger"
           }
           return item
         })
        }
      }
    };
  },
  watch:{
    'formConfig.fmlForm.startReleaseDate'(){
      this.watchDate("startReleaseDate", "endReleaseDate", 0, 2, 0, 3, 1);
    },
    'formConfig.fmlForm.endReleaseDate'(){
     this.watchDate("startReleaseDate", "endReleaseDate", 0, 2, 0, 3, 2);
    },
  },
  methods: {
    // 操作按钮当前按钮
    stateHandle(state) {
      this.state = state;
    },
     watchDate(startDate,endDate, firstStart,firstEnd,lastStart,lastEnd, stateHandle) {
      let start = this.formConfig.fmlForm[startDate];
      let end = this.formConfig.fmlForm[endDate];
      let endPicker = this.formConfig.defaultConfig.tr[lastStart].td[
        lastEnd
      ];
      let startPicker = this.formConfig.defaultConfig.tr[firstStart].td[
        firstEnd
      ];
      if (stateHandle == 2) {
        startPicker.pickerOptions = {
          disabledDate(time) {
            if(end){
              return (time.getTime() >= new Date(end) - 8.64e6);
            }else{
              return false
            }
          }
        };
      } else if (stateHandle == 1) {
        endPicker.pickerOptions = {
          disabledDate(time) {
            return time.getTime() <= new Date(start) - 8.64e7;
          }
        };
      }
    },
  },
  mounted() {
    this.$refs.searchComp.$refs.fmlInput.$refs.input[0].focus()
    // 初始化
    this.$store.commit("setUpdateTable");
  }
};
</script>
